---
import Layout from '../../../layouts/Layout.astro';
import { globalAchievements } from '../../../util/getGlobalStats';
import {
  achievementClassEmoji,
  achievementClassGradient,
  achievementClassGradientText,
  achievementClassSlug,
} from '../../../util/achievementClasses';
import { resizedGitHubAvatarURL } from '../../../util/resizedGitHubAvatarURL';
import src from '../_og.jpg?url';

export function getStaticPaths() {
  return globalAchievements.map((achievement) => ({
    params: {
      groupID: achievement.groupID,
      class: achievementClassSlug(achievement.class),
    },
    props: achievement,
  }));
}

type Props = (typeof globalAchievements)[number];

const { title, details, contributors, class: cls, repo } = Astro.props;
---

<Layout
  title={`${title} ${achievementClassEmoji(cls)} — PaddlePaddle Achievements`}
  description={`${details}. See PaddlePaddle contributors with this achievement.`}
  ogImg={{
    src,
    alt: 'PaddlePaddle Badges Achievements showing three cards in gold, silver, and bronze colors.',
  }}
>
  <div class="flex flex-col gap-10">
    <a href="/achievements" class="link text-sm">← Back to Achievements</a>
    <div class="flex flex-col gap-4">
      <h1 class="heading-3">
        <span
          class:list={[
            'inline-block w-[.75em] h-[.75em] mr-0.5 rounded-full translate-y-px',
            achievementClassGradient(cls),
          ]}></span>{' '}
        <span class:list={[achievementClassGradientText(cls)]}>
          {title}
        </span>
      </h1>
      <div class="font-mono text-lg flex flex-wrap gap-x-10 gap-y-3 items-end">
        <p>{details}</p>
        {
          repo && (
            <p class="text-sm">
              <a
                href={`https://github.com/paddlepaddle/${repo}/`}
                class="inline-flex gap-2 items-center group link"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 16 16"
                  width="1.25rem"
                  height="1.25rem"
                  class="fill-current"
                >
                  <path
                    fill-rule="evenodd"
                    d="M8 0a8 8 0 0 0-2.5 15.6c.4 0 .5-.2.5-.4v-1.5c-2 .4-2.5-.5-2.7-1 0-.1-.5-.9-.8-1-.3-.2-.7-.6 0-.6.6 0 1 .6 1.2.8.7 1.2 1.9 1 2.4.7 0-.5.2-.9.5-1-1.8-.3-3.7-1-3.7-4 0-.9.3-1.6.8-2.2 0-.2-.3-1 .1-2 0 0 .7-.3 2.2.7a7.4 7.4 0 0 1 4 0c1.5-1 2.2-.8 2.2-.8.5 1.1.2 2 .1 2.1.5.6.8 1.3.8 2.2 0 3-1.9 3.7-3.6 4 .3.2.5.7.5 1.4v2.2c0 .2.1.5.5.4A8 8 0 0 0 16 8a8 8 0 0 0-8-8z"
                  />
                </svg>
                <span>See repo on GitHub</span>
              </a>
            </p>
          )
        }
      </div>
    </div>

    <hr class="border-neutral-500" />

    <section class="flex flex-col gap-6">
      <h2 class="heading-4 text-white">
        <span>Contributors with this achievement</span>{' '}
        <span
          class="inline-block align-middle text-xl leading-none px-2.5 py-1.5 bg-white text-black font-mono font-semibold rounded-full"
        >
          {contributors.length}
        </span>
      </h2>

      <ul class="flex flex-wrap gap-3 sm:gap-6 text-sm sm:text-base text-white font-semibold">
        {
          contributors.map((contributor) => (
            <li class="flex items-center p-1 sm:p-2 pr-3 sm:pr-3.5 gap-2 relative rounded-full bg-neutral-500">
              <img
                width="28"
                height="28"
                src={resizedGitHubAvatarURL(contributor.avatar_url, 42)}
                alt=""
                class="w-7 h-7 rounded-full object-cover bg-neutral-700"
                loading="lazy"
                decoding="async"
              />
              <a
                href={`/contributor/${contributor.username}/`}
                class="after:absolute after:inset-0"
              >
                {contributor.username}
              </a>
            </li>
          ))
        }
      </ul>
    </section>
  </div>
</Layout>
